<template>
  <div class="listMain">
    <div class="works" v-if="!this.$route.query.mark" @touchend.stop="communityTouch"></div>
    <div class="bookMain">
      <div class="typeBox">
        <div class="type" :style="typeStyle('我的点赞')" @touchend="typeTouch('我的点赞')">我的点赞</div>
        <div class="type" :style="typeStyle('我的作品')" @touchend="typeTouch('我的作品')">我的作品</div>
      </div>
      <swiper v-show="type==='我的作品'" :options="swiperOption" ref="listSwiper" class="listSwiper">
        <swiper-slide v-for="(listPage,pageIndex) in produceList" :key="pageIndex">
          <v-touch class="communityBox" @tap="produceTouch(item)" v-for="(item,index) in listPage" :key="index">
            <div class="personalBase">
              <div class="title">{{item.detail.isRelease?"已发布":"未发布"}}</div>
            </div>
            <div class="communityBase">
              <div class="produceMain" :style="produceStyle(item.content[0].scene)">
                <div class="produceImagery" v-for="imagery in item.content[0].imagery" :key="imagery.produceEryId"
                  :style="imageryStyle(imagery)"> </div>
                <div class="produceRole" v-for="role in item.content[0].role" :key="role.produceRoleId+999"
                  :style="roleStyle(role)"> </div>
              </div>
            </div>
          </v-touch>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <swiper v-show="type==='我的点赞'" :options="swiperOption" ref="listSwiper" class="listSwiper">
        <swiper-slide v-for="(listPage,pageIndex) in collectList" :key="pageIndex">
          <v-touch class="communityBox" @tap="collectTouch(item.id)" v-for="(item,index) in listPage" :key="index">
            <div class="praiseBase">
              <div class="praise" :style="praiseStyle(item)" @touchend.stop="praiseTouch(item)"></div>
            </div>
            <div class="personalBase">
              <div class="title">{{item.content.detail.picbookname}}</div>
            </div>
            <div class="communityBase">
              <div class="produceMain" :style="produceStyle(item.content.content[0].scene)">
                <div class="produceImagery" v-for="imagery in item.content.content[0].imagery"
                  :key="imagery.produceEryId" :style="imageryStyle(imagery)"> </div>
                <div class="produceRole" v-for="role in item.content.content[0].role" :key="role.produceRoleId+999"
                  :style="roleStyle(role)"> </div>
              </div>
            </div>
          </v-touch>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <div class="next"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  data() {
    return {
      swiperOption: {
        speed: 500,
        pagination: {
          el: '.swiper-pagination',
        },
        longSwipesRatio: 0.15
      },
      type: "我的作品"
    }
  },
  computed: {
    //我的作品
    produceList() {
      return this.split(this.userProduceList, 6)
    },
    //我的点赞作品
    collectList() {
      const list = this.communityList.filter(item => { return this.collectionIdList.indexOf(item.id) > -1 })
      return this.split(list, 6)
    },
    typeStyle(type) {
      return function (type) {
        const scale = this.type === type ? 1.2 : 1,
          color = this.type === type ? "white" : "rgb(220, 135, 16)",
          background = this.type === type ? "newList/选中分类.png" : "newList/未选中分类.png"
        return {
          transform: "scale(" + scale + ")",
          color: color,
          background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
        }
      }
    },
    praiseStyle(item) {
      return function (item) {
        const background = this.collectionIdList.indexOf(item.id) > -1 ? "community/点赞-已点击.png" : "community/点赞-未点击.png"
        return {
          background: "url(" + this.variable.STATICE_URLTITLE + background + ")0 0/100% 100%"
        }
      }
    },
    produceStyle(scene) {
      return function (scene) {
        const background = scene ? scene : this.variable.STATICE_URLTITLE + "produce/默认场景.png"
        return {
          background: "url(" + background + ")0 0/100% 100%"
        }
      }
    },
    imageryStyle(imagery) {
      return function (imagery) {
        return {
          position: "absolute",
          background: "url(" + imagery.eryImgInWorld + ")0 0/100% 100%",
          width: imagery.widthInWorld,
          height: imagery.heightInWorld,
          top: imagery.topInWorld,
          left: imagery.leftInWorld
        }
      }
    },
    roleStyle(role) {
      return function (role) {
        return {
          position: "absolute",
          background: "url(" + role.imageUrl + ")0 0/100% 100%",
          width: role.width,
          height: role.height,
          top: role.topInWorld,
          left: role.leftInWorld
        }
      }
    },
    ...mapGetters("produceStatus", {
      communityList: "getCommunityList",
      produce: "getProduce",
      userProduceList: "getUserProduceList",
      collectionIdList: "getCollectionIdList"
    })
  },
  methods: {
    communityTouch: function () {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/community", query: { mark: true } })
        }
      })
    },
    typeTouch: function (type) {
      this.clickMusic()
      return this.type = type
    },
    //点赞
    praiseTouch: function (item) {
      this.clickMusic()
      const index = this.collectionIdList.indexOf(item.id)
      index > -1 ? this.collectionIdList.splice(index, 1) : this.collectionIdList.push(item.id)
      this.userSaveDate("collectionIdList", this.collectionIdList)
    },
    collectTouch: function (id) {
      this.touchMusic()
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/communityPicbook", query: { picbookId: id } })
        },
        isBackground: true
      })
    },
    produceTouch: function (item) {
      this.touchMusic()
      //已发布则放大查看
      if (item.detail.isRelease) {
        this.setLoading({
          callback: () => {
            this.$router.push({ path: "/communityPicbook", query: { produceId: item.detail.produceId } })
          },
          isBackground: true
        })
      }
      //未发布进入编辑
      else {
        //有未保存的创作则不进行覆盖
        const produce = JSON.parse(JSON.stringify(this.produce))
        produce.content = this.produce.content.filter(items => { return items.imagery.length > 0 || items.role.length > 0 || items.scene })
        if (this.produce.detail.produceId >= 0) {
          this.setProduce(item)
          this.setLoading({
            callback: () => {
              this.$router.push({ path: "/produce" })
            }
          })
        }
        else {
          if (produce.content.length > 0) {
            this.setPopup({
              content: "你有未保存的创作",
              callback: () => {
                this.setLoading({
                  callback: () => {
                    this.$router.push({ path: "/produce" })
                  }
                })
              }
            })
          }
          else {
            this.setProduce(item)
            this.setLoading({
              callback: () => {
                this.$router.push({ path: "/produce" })
              }
            })
          }
        }
      }
    },
    ...mapActions("mainStatus", ["setLoading", "setPopup"]),
    ...mapActions("produceStatus", ["setProduce"])
  }
}
</script>

<style scoped lang="stylus">
.listMain
  position absolute
  width 100vw
  height 100vh
  transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)
  .works
    $coord('WHRT', 10vh, 10vh, 2rem, 1rem)
    background url($urlTitle + 'icon/icon-社区.png') 0 0 / 100% 100%
    z-index 99
  .bookMain
    position relative
    width 150vh
    height 80vh
    margin 18vh auto 0 auto
    max-width 90vw
    max-height 50vw
    min-width 75vw
    background url($urlTitle + 'personals/阅读背景.png') 0 0 / 100% 100%
    .next
      background url($urlTitle + 'newList/翻页角.png') 0 0 / 100% 100%
      $coord('WHRB', 35%, 30%, 3%, 5%)
      z-index 99
      pointer-events none
    .typeBox
      $coord('WHLT', 12rem, 2.5rem, 0, -2rem)
      .type
        float right
        width 4rem
        height 1.8rem
        margin 0.85rem 0.25rem 0rem 0.3rem
        transform-origin 50% 100%
        transition all 0.2s
        $alignCenter()
        font-size 0.75rem
        padding-top 0.5rem
        box-sizing border-box
    .listSwiper
      $coord('WHLT', 130vh, 65vh, 50%, 50%)
      transform translate3d(-50%, -50%, 0)
      .swiper-pagination
        position absolute
        bottom 0
      .communityBox
        float left
        width 38vh
        height 24vh
        margin 4vh 2.6vh 2vh 2.66vh
        position relative
        transition all 0.3s
        filter drop-shadow(1px 1px 2px rgba(159, 154, 154, 0.6))
        border 0.5vh solid white
        box-sizing border-box
        .praiseBase
          $coord('WHRB', 6vh, 6vh, 2vh, 2vh)
          background white
          border-radius 50%
          filter drop-shadow(1px 1px 1px #d8d4d499)
          z-index 10
          .praise
            $coord('WHLT', 3vh, 2.6vh, 1.5vh, 1.8vh)
        .personalBase
          $coord('WHLT', 15vh, 8vh, -2vh, -2vh)
          background url($urlTitle + 'personal/core/作品标题.png') 0 0 / 100% 100%
          z-index 10
          color #ff9024
          letter-spacing 0.5vh
          .title
            position absolute
            $center('WHLT', 3rem, 0.5rem)
            line-height 0.5rem
            text-align center
            font-size 2vh
            transform rotate(-9deg)
            top 45%
        .communityBase
          $coord('WHLT', 100%, 100%, 0, 0)
          overflow hidden
          .produceMain
            $coord('WHLT', 43.9vh, 24vh, -2.95vh, 0)
    .listSwiper >>>.swiper-pagination-bullet-active
      background rgb(254, 149, 0)
</style>